<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
 <!--   <div id="header">
        <p>Is this a circle?</p>
    </div>

    <svg width="500px" height="40px">
        <circle cx="50" cy="20" r="20"></circle>
    </svg>

    <div class="footer">
        <p>Yeah,looks like it</p>
    </div>-->

    <script>
        var body = d3.select("body");
        body.append("div")
                .attr("id", "header")
            .append("p")
                .text("Is this a circle?");

        body.append("svg")
                .attr("height", 40)
            .append("circle")
                .attr("r", 20)
                .attr("cx",50)
                .attr("cy",20);
        body.append("div")
                .attr("class","footer")
            .append("p")
                .text("Yeah,looks like it");
    </script>
</body>
</html>